<!--用户登录页面-->

<template>
  <div class="overall">
    <div class="content">
      <div class="content-left">
        <img
          src="../../assets/OIP-C.jpg"
          alt="翠·夏"
          style="width: 100%; height: 100%"
        />
      </div>
      <div class="content-right">
        <img
          src="../../assets/badge.jpg"
          alt="校徽"
          style="width: 80px; height: 80px"
        />
        <div class="content-right-all">
          <h2>登录</h2>
          <div class="content-right-input">
            <div>
              <label for="username">用户名：</label>
              <el-input
                v-model="username"
                style="width: 315px"
                placeholder="请输入用户名"
                @keydown.enter.native="logon"
              />
              <br />
              <label for="password">密码：</label>
              <el-input
                v-model="password"
                style="width: 315px"
                type="password"
                placeholder="请输入密码"
                show-password
                @keydown.enter.native="logon"
              />
            </div>
            <br />
            <el-button  @click="logon">登录</el-button>
            <br />
            <el-button @click="register">注册</el-button>
            <br>
            <el-button type="warning" round @click="rooterLogin">管理员登录</el-button>
          </div>
        </div>
        <p>忘记密码请联系管理员，管理员联系方式：188xxxxxxxx</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import router from "@/router";
import { ElMessage } from "element-plus";
import { ref } from "vue";

const username = ref("");
const password = ref("");

const logon = () => {
  fetch(
    `http://localhost:3000/TbUserinfoController/getlogin?sno=${username.value}&password=${password.value}`
  )
    .then((res) => res.json())
    .then((res) => {
      console.log(res.data);
      if (res.code == 200) {
        if (res.data.status == 2) {
          router.push({
            path: "/stuinfo",
          });
          let token = res.data.id;
          localStorage.setItem("token", token);
          console.log(localStorage.getItem("token"));
        } else {
          router.push({
            path: "/teainfo",
          });
          let token = res.data.id;
          localStorage.setItem("token", token);
          console.log(localStorage.getItem("token"));
        }
      } else {
        ElMessage({
          message: "用户名或密码错误",
          type: "error",
        });
        password.value = "";
      }
    });
};

const register = () => {
  router.push({
    path: "/userRegister",
  });
};

const rooterLogin =() => {
  // router.push({
  //   path:"/rootindex",
  // })

  fetch(
    `http://localhost:3000/TbRootController/getlogin?number=${username.value}&password=${password.value}`
  )
    .then((res) => res.json())
    .then((res) => {
      console.log(res.data);
      if (res.code == 200) {
          router.push({
            path: "/rootindex",
          });
      } else {
        ElMessage({
          message: "用户名或密码错误",
          type: "error",
        });
        password.value = "";
      }
    });
}

</script>

<style scoped>
.overall {
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
}
.content {
  margin-top: 30px;
  width: 1000px;
  height: 600px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  display: flex;
}

.login-container {
  border: 1px solid #ccc;
  padding: 20px;
  width: 300px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h2 {
  text-align: center;
  margin-bottom: 20px;
}
.content-right {
  padding-left: 100px;
  align-items: center;
  justify-content: center;
}

.content-right p {
  color: rgb(145, 151, 168);
  font-size: small;
}

.content-right img {
  padding-top: 20px;
}

.content-right-all {
  padding-top: 30px;
}

.content-right-input label {
  display: block;
  margin-bottom: 5px;
}

.content-right-input input {
  width: 300px;
  padding: 5px;
  margin-bottom: 20px;
}

.content-right-input button {
  width: 315px;
  padding: 10px;
  background-color: #007bff;
  color: #fff;
  border: none;
  cursor: pointer;
  margin-bottom: 10px;
}
</style>